<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue组件</title>
    <script src="../libs/vue.js"></script>
    <link rel="stylesheet" href="../libs/animate.css">
    <style>
        .box{
            width:200px;
            height: 200px;
            background: darkcyan;
            color: #dfdfdf;
        }
        table{
            border:1px solid #999;
            background: deeppink;
            color:#fff;
        }
        tr td{
            border:1px solid #999;
            padding:10px;
        }
        ul{
            background: darkgoldenrod;
            width:40%;
        }
        .zoom-enter-active{
            animation: zoomInDown 1s;
        }
        .zoom-leave-active{
            animation: zoomOutDown 1s;
        }
        .slot{
            width:50%;
            margin-top: 20px;
            border: 1px solid darkmagenta;
            border-radius: 10px;
            padding:30px;
        }
    </style>
</head>
<body>
    <div id="app">
        <h2>  {{title }} </h2>
        <h2>msg == {{msg }}</h2>
        <m-head></m-head>
        <hr>
        <Home id="2000" :msg="msg" :html="html" >
            <!-- 父组件给子组件的动态分发数据  -->
            <div>
                <h2>Are you ok</h2>
                <h2>Vue api 基本搞定了  </h2>
            </div>
        </Home>
        <Home id="2000" :msg="msg" :html="html" >    
            <template v-slot:banner  >
                <div>
                    <h2>Banner - Banner 轮播 1 </h2>
                    <h2>Banner - Banner 轮播 2 </h2>
                </div>
            </template>
        </Home>

        <Home id="2000" :msg="msg" :html="html" >    
            <template #banner   >
                <div>
                    <h2>Banner - Banner 轮播 4 </h2>
                    <h2>Banner - Banner 轮播 5 </h2>
                </div>
            </template>
        </Home>
        <hr>
        <myuser></myuser>
        <myuser>
            <template v-slot:default="scope">
                <h2> {{ scope.info.age   }}</h2>
            </template>
        </myuser>
        <myuser>
            <template #default="scope">
                <h2> {{scope.info.word }}</h2>
            </template>
        </myuser>

    </div>

    <template id="home">
        <div>
            <h2>Home - hOme - home </h2>
            <h2>id == {{id}} -- {{msg}}</h2>
            <div v-html="html"></div>
            <hr>
            <div class="slot">
                <slot>这是组件的插槽(slot) 如果没有父组件的内容分发, 这里就默认显示 </slot>
            </div>
            <div class="slot">
                <slot name="banner"> 这里可能呈现具名插槽的内容 (banner )</slot>
            </div>
        </div>
    </template>

    <template id="myuser">
        <div>
            <h2>用户信息 -  myuser -  1 </h2>
            <h2>显示用户信息 </h2>
            <div>
                <slot :info="info">
                    {{info.username}}
                </slot>    
            </div>
            <hr>
        </div>
    </template>
    <script>
        // 全局注册
        const bus = new Vue()   // $emit $on $once 
        Vue.component("mHead",{
            template:"<header>Head - Head - wh2116daydayup </header>"
        })

        Vue.component("Home",{
            template:"#home",
            props:['id','msg','html']
        })

        Vue.component("myuser",{
            template:"#myuser",
            data(){
                return {
                    info:{
                        username:"zuozuomu",
                        age:28,
                        word:"daydayup-天道酬勤 "
                    }
                }
            }
        })

        const vm = new Vue({
            data:{
                title:"Vue 组件插槽 slot  ",
                msg:'wh2116-daydayup',
                html:"<h2> 4.1 节日快乐 </h2>"
            },
            mounted(){
                document.getElementsByTagName('title')[0].innerHTML = this.title 
            }
        }).$mount("#app")
    </script>
     <!-- 
        Vue 实现了一套内容分发的 API slot  将 <slot> 元素作为承载分发内容的出口
        插槽  slot 专门接受 从父组件传递来的 (props+slot ) html模板  内容分发 
        
        父组件给子组件传递数据  props 
        父组件 想给子组件 传递 模板(html标签)   用 slot 来接受 内容分发 模块 
        slot 父组件可以把模板标签 动态分发子组件  子组件放到指定的位置区域 (slot 插槽)

        具名插槽 slot  精准投放  定位   name="a"
        template v-slot=  "a"
        name="menu"  v-slot:menu   #menu 

        作用域插槽  把子组件的数据通过插槽传递给父组件 由父组件决定显示什么数据      

        以后封装组件   props 70%  slot 30%
     -->
</body>
</html>


